<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 边框表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    #modifyModal {
      display: none;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .modify-modal-box {
      width: 100%;
      height: 100%;
      /* 预防被盖住 */
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #modifyModalContent {
      padding: 20px;
      background-color: #fff;
    }

    .modal-dialog {
      width: 300px;
      height: 400px;
    }

    .modal-footer>div>button {
      width: 100%;
      height: 40px;
      background-color: rgb(118, 118, 226);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }

    #modifyModal1 {
      display: none;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .modify-modal-box1 {
      width: 100%;
      height: 100%;
      /* 预防被盖住 */
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #modifyModalContent1 {
      padding: 20px;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <!-- 查询 -->
  <div style="display: flex;">
    <div style="display: flex;">
      <!-- <span style="display: flex; justify-content: center;align-items: center;">名称:</span> -->
      <input id="name" type="text" class="form-control" placeholder="请输入名称" style="width: 200px;" />
    </div>
    <div style="display: flex;">
      <!-- <span style="display: flex; justify-content: center;align-items: center;">城市:</span> -->
      <input id="city" type="text" class="form-control" placeholder="请输入城市" style="width: 200px;" />
    </div>
    <!-- 查询按钮 -->
    <button id="searchBtn" type="button" class="btn btn-default">查询</button>
  </div>
  <br>
  <br>
  <!-- 增加 -->
  <button type="button" class="btn btn-default" id="addBtn">增加</button>

  <!-- 表格 -->
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>名称</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>
          <button type="button" class="btn btn-danger">删除</button>
          <button type="button" class="btn btn-info">修改</button>
        </td>
      </tr>
      <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>
          <button type="button" class="btn btn-danger">删除</button>
          <button type="button" class="btn btn-info">修改</button>
        </td>
      </tr> -->
    </tbody>
  </table>

  <!-- 删除模态框 -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!--模态框头部-->

        <!-- 模态框内容-->
        <div class="modal-body">
          确认删除?
        </div>

        <!--模态框底部-->
        <div class="modal-footer">
          <div>
            <button type="button" id="confirmDelete" class="btn btn-danger" data-bs-dismiss="modal">确认</button>
          </div>
          <div>
            <button type="button" id="cancelDelete" class="btn btn-success" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑 -->
  <div id="modifyModal">
    <div class="modify-modal-box">
      <div id="modifyModalContent">
        <form>
          <!-- 用户不能修改id -->
          <div>
            <label style="width: 70px; height: 20px;">id:</label><input id="dataId" disabled type="text"
              style="border: 1px solid grey; border-radius: 3px;" />
          </div>
          <div>
            <label style="width: 70px; height: 20px;">名称:</label><input id="dataName" type="text"
              style="border: 1px solid grey; border-radius: 3px;" />
          </div>
          <div>
            <label style="width: 70px; height: 20px;">城市:</label><input id="dataCity" type="text"
              style="border: 1px solid grey; border-radius: 3px;" />
          </div>
        </form>
        <!-- form 会导致 自动关闭 -->
        <div style="width: 100%; display: flex;justify-content: space-between; margin: 0px 1px 0px 1px;">
          <button id="confirmBtn">修改</button>
          <button id="cancelBtn">取消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增 -->
  <div id="modifyModal1">
    <div class="modify-modal-box1">
      <div id="modifyModalContent1">
        <form>
          <!-- 用户不能修改学号 -->
          <div class="row">
            <label class="col-sm-4">ID：</label><input class="col-sm-7" id="dataId1" disabled type="text" />
          </div>
          <div class="row">
            <label class="col-sm-4">姓名：</label><input class="col-sm-7" id="dataName1" type="text" />
          </div>
          <div class="row">
            <label class="col-sm-4">城市：</label><input class="col-sm-7" id="dataCity1" type="text" />
          </div>
        </form>
        <!-- form 会导致 自动关闭 -->
        <div class="row" style="display: flex; justify-content: space-between;">
          <button id="confirmBtn1" class="col-sm-4">确定新增</button>
          <button id="cancelBtn1" class="col-sm-4">取消</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    //数据
    const data = [
      { id: 1, name: "李四", city: "重庆" },
      { id: 2, name: "张三", city: "成都" },
    ];

    //渲染
    function renderList(data) {
      $("tbody").empty();
      for (let i = 0; i < data.length; ++i) {
        const item = data[i];
        $("tbody").append(
          `<tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button id="delete-btn" data-id="${item.id}" type="button" class="btn btn-danger">删除</button>
            <button id="modify-btn" data-id="${item.id}" type="button" class="btn btn-info">修改</button>
          </td>
        </tr>`
        );
      }
    }
    renderList(data);

    //删除
    $("tbody").on("click", "#delete-btn", function (event) {
      $(".modal").show();
      $("#confirmDelete").on("click", function () {
        const dataId = parseInt($(event.target).attr("data-id"));
        // 修改 data
        // 通过id 找到对应数据 并删除
        for (let i = 0; i < data.length; ++i) {
          if (data[i].id === dataId) {
            data.splice(i, 1);
          }
        }
        renderList(data);
        $(" .modal").hide();
      });
      $("#cancelDelete").on("click", function () {
        $(".modal").hide();
      })
    })

    //修改
    $("tbody").on("click", "#modify-btn", function (event) {
      const dataId = parseInt($(event.target).attr("data-id"));
      // 展示弹窗
      $("#modifyModal").show();
      const currentdata = data.find((item) => {
        console.log(item);
        return item.id === dataId;
      });
      // console.log(currentdata);
      $("#dataId").val(currentdata.id);
      $("#dataName").val(currentdata.name);
      $("#dataCity").val(currentdata.city);
    });
    // 关闭弹窗
    $("#cancelBtn").on("click", function () {
      $("#modifyModal").hide();
    });
    // 确认修改
    $("#confirmBtn").on("click", (event) => {
      // 获取input的值
      const id = parseInt($("#dataId").val());
      const name = $("#dataName").val();
      const city = $("#dataCity").val();
      // 修改 data
      for (let i = 0; i < data.length; ++i) {
        const item = data[i];
        if (item.id === id) {
          item.id = id;
          item.name = name;
          item.city = city;
        }
      }
      // 重新渲染
      renderList(data);
      // 隐藏弹窗
      $("#modifyModal").hide();
    });



    //新增
    $("#addBtn").on("click", function () {
      $("#modifyModal1").show();
      $("#dataId1").empty();
      $("#dataName1").empty();
      $("#dataCity1").empty();
    });

    // 新增确定按钮
    $("#confirmBtn1").on("click", function () {
      const obj = {};
      const id = data.length + 1;
      const name = $("#dataName1").val();
      const city = $("#dataCity1").val();
      obj.id = id;
      obj.name = name;
      obj.city = city;
      data.push(obj);
      console.log(obj);
      // console.log(data);
      renderList(data);
      $("#modifyModal1").hide();
    });

    // 新增取消按钮
    $("#cancelBtn1").on("click", function () {
      $("#modifyModal1").hide();
    });
    //查询
    $("#searchBtn").on("click", function (event) {
      // 获取名称
      const name = $("#name").val();
      // 获取城市
      const city = $("#city").val();
      // console.log(name, typeof name);

      const searchData = [];

      for (let i = 0; i < data.length; ++i) {
        const item = data[i];
        // 如果为空  都添加
        // 如果name 包含字符串 添加

        // includes 进行模糊搜索
        // data[i].name === name
        const condition =
          (!name || item.name.includes(name)) &&
          (!city || item.city.includes(city));
        if (condition) {
          searchData.push(item);
        }
      }
      // console.log(searchData);
      // 搜索后  原数据没有发生改变，到时 分页的时候会有问题
      renderList(searchData);
    });
  </script>
</body>

</html>